<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <form class="layui-form">
                <div class="layui-form lay-header">
                    <div class="toolbar">
                        <div class="layui-form-item lay-query-content">
                            <div class="lay-query-box">
                                <div class="query-lt">
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">签收记录编号：</label>
                                        <div class="layui-input-inline mr0">
                                            <input name="code" class="layui-input" type="text" placeholder="签收记录编号"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">配送任务编号：</label>
                                        <div class="layui-input-inline mr0">
                                            <input name="deliveryOrderCode" class="layui-input" type="text" placeholder="配送任务编号"/>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label w-auto">创建时间：</label>
                                        <div class="layui-input-inline">
                                            <input  id="pTime" class="layui-input date-icon" type="text" placeholder="选择创建时间" autocomplete="off" readonly/>
                                            <input name="startCreateTime" id="sTime" style="display: none"/>
                                            <input name="endCreateTime" id="eTime" style="display: none"/>
                                        </div>

                                    </div>
                                </div>
                                <div class="query-rt">
                                    <div class="layui-inline">
                                        <button class="layui-btn icon-btn" lay-filter="formSubSearchLog" lay-submit
                                                type="button">查询
                                        </button>
                                        <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit
                                                type="reset">
                                            重置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- 表格 -->
            <table class="layui-table" id="orderDeliveryDetailTable" lay-filter="orderDeliveryDetailTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="orderDeliveryDetailTableBar">
    <a class="layui-btn  layui-btn-xs" lay-event="details">详情</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="orderDeliveryDetailForm">
    <div class="layui-card">
        <div class="layui-card-body">
            <form lay-filter="orderDeliveryDetailForm" class="layui-form model-form">
                <div class="layui-form-item">
                    <table class="layui-table" id="detailsTable" lay-filter="detailsTable"></table>
                </div>
                <div class="layui-form-item">
                    <table class="layui-table" id="detailsTableList" lay-filter="detailsTableList"></table>
                </div>
            </form>
        </div>
    </div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin','laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;


         //时间范围
         laydate.render({
            elem: '#pTime',
            type: 'date',
            range: true,
            done: function(value, date, endDate){
                if (value){
                    let dateValue = value.split(" - ");
                    $("input[name='startCreateTime']").val(dateValue[0] + " 00:00:00");
                    $("input[name='endCreateTime']").val(dateValue[1] + " 23:59:59");
                }else {
                    $("input[name='startCreateTime']").val("");
                    $("input[name='endCreateTime']").val("");
                }
            }
        });

        // 渲染表格
        var insTb = table.render({
            elem: '#orderDeliveryDetailTable',
            url: config.base + 'enterprisecab/order/admin/orderDeliverySign/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers',title: '序号'}
                ,{field: 'code', sort: true, title: '签收记录编号'}
                ,{field: 'deliveryOrderCode',title: '配送任务编号'}
                // ,{field: '', sort: true, title: '需求计划单'}
                ,{field: 'cabNum', title: '柜子数量',templet: d => "<span style='color:red'>"+d.cabNum+"</span>"}
                ,{field: 'skuNum',title: '物料数量'}
                // ,{field: '', sort: true, title: '所在地区'}
                // ,{field: '', sort: true, title: '所属服务商'}
                ,{field: 'createTime', sort: true, title: '提交时间'}
                ,{field: 'statusDesc',title: '状态'}
                ,{field: 'distributionClerk',title: '配货员'}
                ,{align: 'center', toolbar: '#orderDeliveryDetailTableBar', title: '操作'}
            ]],
            done: function (res, curr, count) {

            }
        });

        // 渲染下拉框
       form.render('select');
        // 工具条点击事件
        table.on('tool(orderDeliveryDetailTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'details') { //详情
                showEditModel(data);
            }
        });

        //监听排序
        table.on('sort(orderDeliveryDetailTable)', function(obj){
            table.reload('orderDeliveryDetailTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
        });



        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: ['1580px',"500px"],
                offset: '65px',
                title: '配送领用记录详情',
                content: $('#orderDeliveryDetailForm').html(),
                success: function () {
                    //detailsTable
                    var detailsTb = table.render({
                        elem: '#detailsTable',
                        data:[data],
                        cellMinWidth: 100,
                        cols: [[
                            {field: 'code', title: '签收记录编号'}
                            ,{field: 'deliveryOrderCode', title: '配送任务编号'}
                            // ,{field: '', title: '所属配货订单'}
                            // ,{field: '', title: '客户公司'}
                            ,{field: 'skuNum', title: '配送物料数'}
                            ,{field: 'cabNum', title: '柜子数'}
                            ,{field: 'statusDesc', title: '状态'}
                            ,{field: 'distributionClerk', title: '配送员'}
                            ,{field: 'creatorName', title: '签收人'}
                            ,{field: 'createTime', title: '签收时间'}
                        ]]
                    });

                    // detailsTableList
                    var detailsTbList = table.render({
                        elem: '#detailsTableList',
                        url: config.base + 'enterprisecab/order/admin/orderDeliverySign/getSignDetailList?signId='+data.id,
                        cellMinWidth: 100,
                        page:true,
                        cols: [[
                            {title: '序号',type:'numbers'}
                            ,{field: 'skuCode', sort: true, title: '物料编号'}
                            ,{field: 'productName', sort: true, title: '物料名称'}
                            ,{field: 'skuSpecValueNames', sort: true, title: '规格'}
                            ,{field: 'unitName', sort: true, title: '单位'}
                            ,{field: 'supplyPrice', sort: true, title: '单价'}
                            ,{field: 'quantityDistribute', sort: true, title: '配送数量',templet: d => "<span style='color:red'>"+d.quantityDistribute+"</span>"}
                            ,{field: 'statusDesc', sort: true, title: '状态'}
                            ,{field: 'quantityConfirm', sort: true, title: '补货数',templet: d => "<span style='color:red'>"+d.quantityConfirm+"</span>"}
                            ,{field: 'quantitySign', sort: true, title: '签收数'}
                            ,{field: 'totalPrice', sort: true, title: '签收货值',templet: d => "<span style='color:red'>"+d.totalPrice+"</span>"}
                        ]]
                    });
                }
            });
        }
    });
</script>